<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- {{newMsg}}
        <child1 @senddata="getData"></child1> -->
        <child2></child2>
        <child1></child1>
    </div>
    <script src="./vue.js"></script>
    <script>
        const child1 = {
            template: `
                <div>
                    这是子组件一
                    <button @click="tData()">点击按钮传值给父组件</button>
                    <button @click="tData2()">点击按钮传值给兄弟组件</button>
                </div>
            `,
            data() {
                return {
                    msg: "这是要传递给父组件的数据",
                    msg2: "这是要传递给child2的数据"
                }
            },

            methods: {
                tData() {
                    this.$emit('senddata', this.msg)
                },

                tData2() {
                    this.$bus.$emit('senddata2', this.msg2)
                }
            }
        }

        const child2 = {
            template: `
                <div>
                    这是子组件2
                    {{msg}}
                </div>
            `,
            created() {
                // console.log(this)
                // var _that = this
                this.$bus.$on('senddata2', (data) => {
                    console.log(this)
                    this.msg = data
                })
            },
            data() {
                return {
                    msg:''
                }
            }
        }

        Vue.component('child1', child1)
        Vue.component('child2', child2)
        var bus = new Vue()
        Vue.prototype.$bus = bus
        new Vue({
            el: "#app",
            data:{
                newMsg: ''
            },
            mounted() {
               this.newMsg = this.$children[0].msg
            },
            methods: {
                getData(data) {
                    console.log(data)
                }
            }
        })
    </script>
</body>
</html>